<template>
  <transition
    appear
    @enter="enter"
    @leave="leave"
  >
    <div
      v-if="showLogin"
      class="login-wrap"
    >
      <div class="login">
        <header>
          <img
            src="/admin/image/logo.png"
            alt=""
          >
          <span>Blog1997</span>
          <a
            href="/"
            class="close"
            @click.prevent="close"
          >✘</a>
        </header>
        <div class="login-box">
          <component
            :is="childComponent"
            :captcha-suffix="captchaSuffix"
            @switch-component="switchComponent"
            @close="close"
            @refreshCaptcha="refreshCaptcha"
          />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'
import SignIn from './sign-in'
import SignUp from './sign-up'
import ForgotPassword from './forgot-password'

export default {
  layout: 'login',
  name: 'Login',
  components: {
    SignIn,
    SignUp,
    ForgotPassword
  },
  data () {
    return {
      captchaSuffix: Math.random(),
      childComponent: SignIn // 当前的子组件
    }
  },
  computed: {
    ...mapGetters(['showLogin'])
  },
  methods: {
    /**
     * 关闭登陆组件
     */
    close () {
      this.$store.commit('globalState/setShowLogin', false)
      this.childComponent = SignIn
    },
    /**
     * @param el
     * @param done
     * 组件载入动画
     */
    enter (el, done) {
      this.$animate(el.querySelector('div .login'), { width: '37rem', height: '32rem', opacity: 1, duration: 230 })
      done()
    },
    /**
     * 组件注销动画
     * @param el
     * @param done
     */
    leave (el, done) {
      this.$animate(el.querySelector('div .login'), { height: '0px', duration: 230, opacity: 0 }, done)
    },
    /**
     * 刷新验证码
     */
    refreshCaptcha () {
      this.captchaSuffix = Math.random()
    },
    /**
     * 更改子组件
     *
     * @param {string} name
     */
    switchComponent (name) {
      switch (name) {
        case 'SignUp':
          this.childComponent = SignUp
          break
        case 'ForgotPassword':
          this.childComponent = ForgotPassword
          break
      }
    }
  }
}
</script>

<style lang="scss">
.login-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.login-form {
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
  input {
    padding-left: 2.3rem !important;
    color: #fff;
  }
  span {
    top: 2rem;
    left: 0.3rem;
    font-size: 1.6rem;
  }
  .login-btn {
    width: 23rem;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.6rem;
    margin-top: 1.2rem;
    border-radius: 0.3rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background-color: #3572ce;
    transition: background-color .3s;
    &:hover {
      background-color: #276ace;
    }
    &:active {
      background-color: #326ec8;
    }
  }
  .captcha {
    width: 23rem;
    margin-top: 1rem;
    cursor: pointer;
  }
  .login-btns {
    width: 23rem;
    color: #d5d7da;
    margin-top: 1rem;
    font-size: 1.4rem;
    justify-content: space-between;
  }
}
.login-wrap .login {
  height: 0;
  opacity: 0;
  width: 0rem;
  $height: 20rem;
  font-size: 3rem;
  overflow: hidden;
  text-align: center;
  padding-top: 1.7rem;
  border-radius: 0.5rem;
  margin: 5.7rem auto 0;
  background-color: $background-color-level-2;
  border: 0.1rem solid $background-color-level-5;
  box-shadow: 0 5px 5px -3px rgba(255, 255, 255, 0.2),
    0 8px 10px -5px rgba(255, 255, 255, 0.14),
    0 3px 14px -3px rgba(255, 255, 255, 0.12);

  header {
    font-size: 1.3rem;
    height: 3.5rem;
    position: relative;
    padding: 0.2rem .2rem 1.2rem .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: .1rem solid rgba(#707174, .7);
    img {
      width: 3.5rem;
      height: 3.5rem;
      vertical-align: middle;
      display: inline-block;
    }

    span {
      font-size: 1.6rem;
      display: inline-block;
    }

    .close {
      position: absolute;
      top: 0;
      right: 1.2rem;
    }
  }
}
.login-box {
  .social-account {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-block;
    box-sizing: border-box;
  }

  .git {
    color: #fff;
    margin-right: 1.7rem;
    svg {
      width: 2.5rem;
      height: 2.5rem;
      fill: #fff;
      display: inline-block;
    }
  }
  .icofont-wechat {
    color: #62b900;
    height: 3.5rem;
    width: 3.5rem;
    display: inline-block;
    vertical-align: middle;
  }
  .qq {
    display: none;
    margin-right: 1.7rem;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
  }
  .weichat {
    vertical-align: top;
  }
}
</style>
